<!doctype html>
<!--[if lt IE 8 ]><html lang="en" class="no-js ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie"><![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>Constellation Admin Skin</title>
	<meta name="description" content="Constellation Admin Skin demo website: check all the features of this awesome admin skin!">
	<meta name="author" content="Display:inline">
	
	<!-- Global stylesheets -->
	<link href="css/reset.css" rel="stylesheet" type="text/css">
	<link href="css/screen.css" rel="stylesheet" type="text/css">
	<link href="css/mobile.css" rel="stylesheet" type="text/css">
	
	<!-- Favicon -->
	<link rel="shortcut icon" type="image/x-icon" href="favicon.html">
	<link rel="icon" type="image/png" href="favicon-large.png">
	
	<!-- Modernizr for support detection -->
	<script src="js/libs/modernizr.custom.min.html"></script>
	
</head>

<body>
	
	<h1>Constellation Admin Skin</h1>
	
	<div id="iphone">
		
		<iframe id="frame" frameborder="0" src="template/mobile/index.html" scrolling="no"></iframe>
		<div id="notes">
			<h2>Notes</h2>
			<p><img src="images/information-blue.png" width="16" height="16">Some elements may not display exactly the way they do on a real mobile depending on your browser - <strong>this is only an emulation</strong>.</p>
			<p><img src="images/information-blue.png" width="16" height="16">Some hover styles may remain from the standard template: they are not handled by mobile devices.</p>
			<p><a href="index.html" title="Back to the template website"><img src="images/back.png" width="16" height="16">To go back to main website, click here</a></p>
		</div>
		<div id="scroll">
			<img src="images/up.png" width="16" height="16" title="Scroll up" id="scroll-up">
			<img src="images/down.png" width="16" height="16" title="Scroll down" id="scroll-down">
			<span>Scroll</span>
		</div>
		
    </div>
	
	<footer>
	
		<p>&copy; Copyright <a href="http://themeforest.net/user/displayinline">Display:inline</a> 2010</p>
	
	</footer>
	
	<!-- Generic libs -->
	<script src="js/jquery-1.6.3.min.js"></script>
	<script>
	
		$(document).ready(function()
		{
			// Browser check
			if (
				($.browser.msie) ||												// IE 6 and lower
				($.browser.mozilla && parseFloat($.browser.version) < 1.9) ||	// Firefox 2 and lower
				($.browser.opera && parseFloat($.browser.version) < 10) ||		// Opera 9 and lower
				($.browser.webkit && parseInt($.browser.version) < 450)			// Older Chrome and Safari
			) {
				document.location.href = 'old-browsers.html';
			}
			
			// Scrolling
			var scrollInt = false;
			var scrolling = false;
			var scrollSpeed = 1;
			var scrollMax = 5;
			
			$('#scroll-up').mousedown(function()
			{
				scrolling = true;
				if (scrollInt)
				{
					clearInterval(scrollInt);
				}
				scrollInt = setInterval(function()
				{
					// Speed
					if (scrolling)
					{
						if (scrollSpeed < scrollMax)
						{
							scrollSpeed += 0.5;
						}
					}
					else
					{
						scrollSpeed -= 0.2;
					}
					
					var frame = document.getElementById('frame');
					var target = $(frame.contentWindow.document || frame.contentDocument);
					var available = target.scrollTop();
					
					if (available > 0)
					{
						target.scrollTop(Math.max(0, available-Math.round(scrollSpeed)));
					}
					else
					{
						scrollSpeed = 0;
					}
					
					if (scrollSpeed <= 1)
					{
						scrollSpeed = 1;
						clearInterval(scrollInt);
						scrollInt = false;
					}
					
				}, 40);
			}).mouseup(function()
			{
				scrolling = false;
			});
			
			$('#scroll-down').mousedown(function()
			{
				scrolling = true;
				if (scrollInt)
				{
					clearInterval(scrollInt);
				}
				scrollInt = setInterval(function()
				{
					// Speed
					if (scrolling)
					{
						if (scrollSpeed < scrollMax)
						{
							scrollSpeed += 0.5;
						}
					}
					else
					{
						scrollSpeed -= 0.2;
					}
					
					var frame = document.getElementById('frame');
					var target = $(frame.contentWindow.document || frame.contentDocument);
					var available = target.scrollTop();
					var docHeight = target.height();
					var frameHeight = $(frame).height();
					
					if (available < docHeight-frameHeight)
					{
						target.scrollTop(Math.min(docHeight-frameHeight, available+Math.round(scrollSpeed)));
					}
					else
					{
						scrollSpeed = 0;
					}
					
					if (scrollSpeed <= 1)
					{
						scrollSpeed = 1;
						clearInterval(scrollInt);
						scrollInt = false;
					}
					
				}, 40);
			}).mouseup(function()
			{
				scrolling = false;
			});
		});
	
	</script>
	
	<script>
	
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-10643639-3']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	
	</script>
</body>
</html>